<template>
  <div class="footer-box">
    <el-row class="login-server" type="flex" justify="center">
      <el-col :span="16" class="login-server-left">
        <ul class="fl">
          <h3>关于我们</h3>
          <li>公司简介</li>
          <li>联系我们</li>
        </ul>
        <ul class="fl">
          <h3>购物指南</h3>
          <li>常见问题</li>
          <li>用户注册</li>
          <li>购物流程</li>
        </ul>
        <ul class="fl">
          <h3>售后服务</h3>
          <li>配送方式</li>
          <li>防伪查询</li>
        </ul>
      </el-col>
      <el-col :span="2">
      <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="6" class="login-server-right">
        <h2>400-008-7666</h2>
        <p>周一至周日 8:30-21:30</p>
        <img src="../assets/img/login/zxkf1.png"/>
        <p>周一至周日 9:00-23:00</p>
      </el-col>
    </el-row>
    <el-row class="footer-img" type="flex" justify="center">
      <img src="../assets/img/login/x-footer.jpg"/>
    </el-row>
    <el-row class="footer" type="flex" justify="center">
      <el-col :span="12">
        <ul>
          <li>关于我们</li>
          <el-divider direction="vertical" class="dl"></el-divider>
          <li>人才招聘</li>
          <el-divider direction="vertical" class="dl"></el-divider>
          <li>帮助中心</li>
          <el-divider direction="vertical" class="dl"></el-divider>
          <li>友情联接</li>
          <el-divider direction="vertical" class="dl"></el-divider>
          <li>联系我们</li>
        </ul>
        <p>绿竹鞋庄 Copyright 2011  运动服 All Rights Reserved ICP：XICP备xxxxxxx号-1 绿竹鞋庄官网专卖店 </p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'footer1',
  data () {
    return {

    }
  },
  components: {

  },
  computed: {

  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss">
  .footer-box {
    background-color: #fff;
  }
  .login-server {
    padding-top: 30px;
    height: 204px;
    ul {
      margin-left: 200px;
      h3 {
        display: block;
        font-size: 14px;
        margin-bottom: 5px;
        color: #575757;
      }
      li {
        color: #848484;
      }
    }
    .login-server-right {
      h2 {
        width: 200px;
        font-size: 22px;
        color: #c1111c;
      }
      p {
        width: 200px;
        font-size: 16px;
        margin: 15px 0;
      }
    }
  }
  .el-divider--vertical {
      display: inline-block;
      width: 1px;
      height: 1em;
      margin: 0 8px;
      vertical-align: middle;
      position: relative;
  }
  .footer-img {
    width: 100%;
    height: 100%;
    background-color: #1a1d1f;
    margin-bottom: 40px;
  }
  .footer {
    text-align: center;
    color: #848484;
    font-size: 12px;
    ul {
      margin-bottom: 15px;
      li {
        cursor: pointer;
        display: inline;
        .dl {
          height: 1rem;
        }
      }
    }
  }
</style>
